<script setup>

import {onMounted} from "vue";
import * as echarts from 'echarts';

onMounted(() => {
  // API访问量走势
  var APItraffictrend = document.getElementById('APItraffictrend');
  var myChart_APItraffictrend = echarts.init(APItraffictrend);
  var APItraffictrendOption;

  APItraffictrendOption = {
    title: {
      text: 'API访问量走势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Success', "Failed"]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2024-04-22', '2024-04-25', '2024-04-26', '2024-04-27']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Success',
        type: 'line',
        color: 'green',
        stack: 'Total',
        data: [120, 132, 101, 134]
      },
      {
        name: 'Failed',
        color: 'red',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234]
      },
    ]
  }

  APItraffictrendOption && myChart_APItraffictrend.setOption(APItraffictrendOption);


  // API访问量
  var APItraffic = document.getElementById('APItraffic');
  var myChart_APItraffic = echarts.init(APItraffic);
  var APItrafficOption;

  APItrafficOption = {
    title: {
      text: 'API访问量'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Success', "Failed"]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2024-04-26', '2024-04-27']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Success',
        type: 'line',
        color: 'green',
        stack: 'Total',
        data: [101, 134]
      },
      {
        name: 'Failed',
        color: 'red',
        type: 'line',
        stack: 'Total',
        data: [191, 234]
      },
    ]
  }

  APItrafficOption && myChart_APItraffic.setOption(APItrafficOption);


  // 访问API次数最多的客户端
  var ThemostfrequentlyaccessedAPI = document.getElementById('ThemostfrequentlyaccessedAPI');
  var myChart_ThemostfrequentlyaccessedAPI = echarts.init(ThemostfrequentlyaccessedAPI);
  var ThemostfrequentlyaccessedAPIOption;

  ThemostfrequentlyaccessedAPIOption = {
    title: {
      text: '访问API次数最多的客户端'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }

  ThemostfrequentlyaccessedAPIOption && myChart_ThemostfrequentlyaccessedAPI.setOption(ThemostfrequentlyaccessedAPIOption);

//   访问次数最多的API
  var ThemostfrequentlyaccessedAPI = document.getElementById('ThemostfrequentlyaccessedAPI');
  var myChart_ThemostfrequentlyaccessedAPI = echarts.init(ThemostfrequentlyaccessedAPI);
  var ThemostfrequentlyaccessedAPIOption;

  ThemostfrequentlyaccessedAPIOption = {
    title: {
      text: '访问次数最多的API'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }

  ThemostfrequentlyaccessedAPIOption && myChart_ThemostfrequentlyaccessedAPI.setOption(ThemostfrequentlyaccessedAPIOption);

//平均访问时长最大的API
  var TheAPIwithhehighestaverageaccesstime = document.getElementById('TheAPIwithhehighestaverageaccesstime');
  var myChart_TheAPIwithhehighestaverageaccesstime = echarts.init(TheAPIwithhehighestaverageaccesstime);
  var TheAPIwithhehighestaverageaccesstimeOption;

  TheAPIwithhehighestaverageaccesstimeOption = {
    title: {
      text: '平均访问时长最大的API'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }

  TheAPIwithhehighestaverageaccesstimeOption && myChart_TheAPIwithhehighestaverageaccesstime.setOption(TheAPIwithhehighestaverageaccesstimeOption);

  //访问次数最多的客户端IP
  var IPaddressoftheclientthataccessesthemosttimes = document.getElementById('IPaddressoftheclientthataccessesthemosttimes');
  var myChart_IPaddressoftheclientthataccessesthemosttimes = echarts.init(IPaddressoftheclientthataccessesthemosttimes);
  var IPaddressoftheclientthataccessesthemosttimesOption;

  IPaddressoftheclientthataccessesthemosttimesOption = {
    title: {
      text: '访问次数最多的客户端IP'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }

  IPaddressoftheclientthataccessesthemosttimesOption && myChart_IPaddressoftheclientthataccessesthemosttimes.setOption(IPaddressoftheclientthataccessesthemosttimesOption);
})
</script>

<template>
  <t-card title="汇总" shadow style="width: 100%;">
    <t-date-range-picker enable-time-picker allow-input clearable/>
    <t-row style="margin-top: 10px;padding: 0 10px;" align="center" justify="space-between">
      <t-col :span="7">
        <div id="APItraffictrend" style="height: 300px;"></div>
      </t-col>
      <t-col :span="3">
        <div id="APItraffic" style="height: 300px;"></div>
      </t-col>

      <t-col :span="6">
        <div id="ThemostfrequentlyaccessedAPI" style="height: 300px;"></div>
      </t-col>
      <t-col :span="6">
        <div id="TheAPIwithhehighestaverageaccesstime" style="height: 300px;"></div>
      </t-col>

      <t-col :span="12">
        <div id="IPaddressoftheclientthataccessesthemosttimes" style="height: 300px;"></div>
      </t-col>
    </t-row>

  </t-card>
</template>

<style scoped>

</style>
